<div id="123" v-cloak>
    <el-row :gutter="20" class="no-margin">
        <el-col :span="20">
            <el-form   >
                <el-form-item label=""  label-width="100%">
                </el-form-item>
                <el-form-item label="显示正常部门"  label-width="100" style=" margin-bottom: 0px;">
                    <el-switch on-text="正常" off-text="所有" v-model="teamStatus"></el-switch>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-row :gutter="20" class="no-margin">
        <el-col :span="16">
            <!--<div class="toolbar">-->
                <!--<el-form :inline="true" :model="formData" class="demo-form-inline">-->
                    <!--<el-form-item >-->
                        <!--<el-input class="el-input&#45;&#45;small" v-model="formInput.key" placeholder="请输入关键字" size="small"  class="input-username"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item>-->
                        <!--<el-button type="success" @click="onSearchFwTeam"  icon="search" size="small">查询</el-button>-->
                        <!--<el-button type="primary" @click="addFwTeam" size="small"><i class="el-icon-plus" ></i> 增加</el-button>-->
                        <!--<el-button @click="handleEdit" type="primary" icon="edit" size="small">修改</el-button>-->
                    <!--</el-form-item>-->
                <!--</el-form>-->
            <!--</div>-->
            <el-table :data="teams"  border style="min-height:400px;"  v-on:row-click="editUser">
                <kf-table-tree-column
                        ref="treeColumn"
                        prop="teamName"
                        accordion="true"
                        disabled:false
                        label="部门"
                        header-align="left" align ="left" min-width="280">
                </kf-table-tree-column>

                <el-table-column label="备注" prop="remark" min-width="120" ></el-table-column>
                <el-table-column label="状态"  min-width="80" >
                    <template scope="scope">
                        <el-tag :type="(scope.row.teamStatus==true || scope.row.teamStatus==1)?'success':'warning'" close-transition>{{(scope.row.teamStatus==true || scope.row.teamStatus==1)?'正常':'失效'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  min-width="120">
                    <template scope="scope">
                        <el-button @click="addFwTeam(scope.row)" type="text" title="添加子部门" v-if="routeType=='dept'" >添加</el-button>
                        <el-button @click="handleEdit(scope.row)" type="text" title="添加子部门" v-if="routeType=='dept'" >编辑</el-button>
                        <!--<el-button @click="handleDelete(scope.row)" type="text" title="添加子部门" v-if="routeType=='dept'">移除</el-button>-->
                        <el-button @click="dialogDuty = true" type="text" title="值班配置" v-if="routeType=='duty'">值班配置</el-button>
                    </template>
                </el-table-column >
            </el-table>
        </el-col>
        <el-col :span="8">
            <el-collapse v-model="activeNames" @click.stop="handleChange" >
                <el-collapse-item name="1" v-if="routeType=='dept'">
                    <template slot="title">
                        <div @click.stop="handleChange">{{currentDept.teamName}}用户
                            <i class="header-icon el-icon-setting" @click="dialogVisible = true" v-if="currentDept.teamName"></i></div>
                    </template>
                    <template>
                        <el-table ref="roleTable" :data="currentDept.userList" style="width: 100%">
                            <el-table-column type="index"></el-table-column>
                            <el-table-column property="userName" label="用户名"></el-table-column>
                            <el-table-column property="userCnName" label="中文名"></el-table-column>
                            <el-table-column  label="角色">
                                <template scope = "scope">
                                    <i class="header-icon el-icon-setting" @click="updateUserRole(scope)" ></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-collapse-item>
                <el-collapse-item name="1" v-if="routeType=='duty'">
                    <template slot="title">
                        <div @click.stop="handleChange">{{currentDept.teamName}}值班人员
                            <i class="header-icon el-icon-setting" @click="dialogDuty = true" v-if="currentDept.teamName"></i></div>
                    </template>
                    <template>
                        <el-table ref="roleTable" :data="currentDept.dutyUser" style="width: 100%">
                            <el-table-column type="index"></el-table-column>
                            <el-table-column property="userName" label="用户名"></el-table-column>
                            <el-table-column property="userCnName" label="用户中文名"></el-table-column>
                        </el-table>
                    </template>
                </el-collapse-item>
                <el-collapse-item name="2" v-if="routeType=='dept'">
                    <template slot="title">
                        <div @click.stop="handleChange" >{{currentDept.teamName}}角色
                            <i class="header-icon el-icon-setting" @click="dialogVisible2 = true" v-if="currentDept.teamName"></i></div>
                    </template>
                    <template>
                        <el-table ref="teamTable" :data="currentDept.roleSet" style="width: 100%">
                            <el-table-column type="index"></el-table-column>
                            <el-table-column property="roleCode" label="角色编码"></el-table-column>
                            <el-table-column property="roleName" label="角色名称"></el-table-column>
                        </el-table>
                    </template>
                </el-collapse-item>
            </el-collapse>
        </el-col>
    </el-row>


    <el-dialog title="选择用户" :visible.sync="dialogVisible" size="small" :before-close="handleCloseUser">
        <div class="transfer-wrapper">
            <kf-table-transfer v-model="myUsers" :data="dataUsers" :titles="['未选用户','可调配人员']" >
                <template slot="left-columns">
                    <el-table-column label="用户名" prop="userName" header-align="center"></el-table-column>
                    <el-table-column label="中文名" prop="userCnName" header-align="center"></el-table-column>
                </template>
                <template slot="right-columns">
                    <el-table-column label="用户名" prop="userName" header-align="center"></el-table-column>
                    <el-table-column label="中文名" prop="userCnName" header-align="center"></el-table-column>
                </template>
            </kf-table-transfer>
            <!--<el-transfer v-model="myUsers" filterable  :props="{key: 'userId',label: 'userCnName'}"-->
                         <!--:data="dataUsers"></el-transfer>-->
        </div>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="confirmUsers" size="small">确 定</el-button>
		  </span>
    </el-dialog>
    <el-dialog title="选择值班人员" :visible.sync="dialogDuty" size="small" :before-close="handleCloseDuty">
        <div class="transfer-wrapper">
            <kf-table-transfer v-model="myDutyPerson" :data="dutyPerson" :titles="['未选用户','可调配人员']" >
                <template slot="left-columns">
                    <el-table-column label="用户名" prop="userName" header-align="center"></el-table-column>
                    <el-table-column label="中文名" prop="userCnName" header-align="center"></el-table-column>
                </template>
                <template slot="right-columns">
                    <el-table-column label="用户名" prop="userName" header-align="center"></el-table-column>
                    <el-table-column label="中文名" prop="userCnName" header-align="center"></el-table-column>
                </template>
            </kf-table-transfer>
            <!--<el-transfer v-model="myUsers" filterable  :props="{key: 'userId',label: 'userCnName'}"-->
            <!--:data="dataUsers"></el-transfer>-->
        </div>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="handleCloseDuty = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="confirmDutyUsers" size="small">确 定</el-button>
		  </span>
    </el-dialog>
    <el-dialog title="选择角色" :visible.sync="dialogVisible2" size="small" :before-close="handleCloseRole">
        <div class="transfer-wrapper">
            <kf-table-transfer v-model="myRoles" :data="dataRoles" :titles="['未选用户','可调配人员']" >
                <template slot="left-columns">
                    <el-table-column label="角色编码" prop="roleCode" header-align="center"></el-table-column>
                    <el-table-column label="角色名" prop="roleName" header-align="center"></el-table-column>
                </template>
                <template slot="right-columns">
                    <el-table-column label="角色编码" prop="roleCode" header-align="center"></el-table-column>
                    <el-table-column label="角色名" prop="roleName" header-align="center"></el-table-column>
                </template>
            </kf-table-transfer>
            <!--<el-transfer v-model="myRoles" :data="dataRoles"></el-transfer>-->
        </div>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible2 = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="confirmRoles" size="small">确 定</el-button>
		  </span>
    </el-dialog>
    <el-dialog title="选择角色" :visible.sync="userRole" size="small" :before-close="handleCloseUserRole">
        <div class="transfer-wrapper">
            <kf-table-transfer v-model="currentUser.roles" :data="dataRoles" :titles="['未选用户','可调配人员']" >
                <template slot="left-columns">
                    <el-table-column label="角色编码" prop="roleCode" header-align="center"></el-table-column>
                    <el-table-column label="角色名" prop="roleName" header-align="center"></el-table-column>
                </template>
                <template slot="right-columns">
                    <el-table-column label="角色编码" prop="roleCode" header-align="center"></el-table-column>
                    <el-table-column label="角色名" prop="roleName" header-align="center"></el-table-column>
                </template>
            </kf-table-transfer>
            <!--<el-transfer v-model="myRoles" :data="dataRoles"></el-transfer>-->
        </div>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="userRole = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="confirmRoles" size="small">确 定</el-button>
		  </span>
    </el-dialog>

    <el-dialog :title="editFormTitle" :visible.sync="editFormVisible" size="small" :before-close="handleCloseForm" >
        <el-form v-if="editFormVisible" :model="formData" :rules="rules" ref="editForm">
            <el-form-item label="部门名称" prop="teamName" :label-width="formLabelWidth">
                <el-input v-model="formData.teamName" auto-complete="off">{{formData}}</el-input>
            </el-form-item>

            <el-form-item label="状态" prop="teamStatus" :label-width="formLabelWidth">
                <el-switch on-text="正常" off-text="失效" v-model="formData.teamStatus"></el-switch>
            </el-form-item>
            <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                <el-input v-model="formData.remark" auto-complete="off">{{formData}}</el-input>
            </el-form-item>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="editFormVisible = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="formConfirm" size="small">确 定</el-button>
        </span>
    </el-dialog>
</div>
